<template>
  <div class="PublicizeCourseMamageDetials">
    <div class="header">
      <div class="setting-title">课程详情</div>
    </div>
    <div class="setting-main">
      <!-- <img :src="getImageUrl(courseDetils.courseData.coverUrl)" class="course-img"> -->
      <el-image style="width: 337px;height: 212px;" :src="getImageUrl(courseDetils.courseData.coverUrl)" fit="cover">
        <template #error>
          <img src="/images/course_default.png" style="width: 100%; height: 100%;">
        </template>
      </el-image>
      <div class="course-content">
        <div class="title">
          {{ courseDetils.courseData.title }}
          <span v-if="courseDetils.courseData.status == 1" class="status-tag listed">已上架</span>
          <span v-else class="status-tag not-listed">未上架</span>
        </div>
        <div class="desc otw-4">{{ courseDetils.courseData.description }}</div>
        <div class="course-info">
          <div class="info">
            <span>作者：</span>{{ courseDetils.expertData.name }}
          </div>
          <div class="info">
            <span>作者所在机构：</span>{{ courseDetils.expertData.unit }}
          </div>
          <div class="info">
            <span>作者职称：</span>{{ courseDetils.expertData.expertTitle }}
          </div>
          <div class="info">
            <span>课程分类：</span>{{ courseTypeList.dict[courseDetils.courseData.type] }}
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <el-button type="primary" @click="router.back()" style="color: #8B8B8B;" text bg>返 回</el-button>
      <!-- <el-button type="primary" round>上 架</el-button> -->
    </div>
  </div>
</template>
<script>
export default { name: 'PublicizeCourseMamageDetials' }
</script>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { http } from '@/utils/http/index.js'
import { ref } from 'vue'
import { getImageUrl } from '@/utils/index.js'
const router = useRouter()
const route = useRoute()

const courseDetils = ref({ courseData: {}, expertData: {} })
if (!route.query.id) router.back()
http.$GET('/Preach/GetPreachCourseDetail', { id: route.query.id, }).then(res => {
  if (res.isError) return
  courseDetils.value = res.result
  getType()
})


const courseTypeList = ref({ options: [], dict: {} })
const getType = () => {
  http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
    if (res.isError) return
    courseTypeList.value = {
      options: res.result.dataLst,
      dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
    }
  })
}
</script>
<style lang='scss' scoped>
.PublicizeCourseMamageDetials {
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .setting-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }

  .status-tag {
    width: 64px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin-left: 20px;

    &.listed {
      color: #2CC86D;
      background-color: #EAF9EF;
    }

    &.not-listed {
      color: #3D88DE;
      background-color: #EAF3F9;
    }
  }

  .header {
    height: 64px;
    border-bottom: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    font-size: 16px;
    font-weight: normal;
    color: #666666;
  }

  .setting-main {
    flex: 1;
    height: 0;
    padding: 34px 53px;
    display: flex;
    gap: 47px;

    .course-img {
      width: 337px;
      height: 212px;
      object-fit: cover;
    }

    .course-content {
      display: flex;
      flex: 1;
      width: 0;
      flex-direction: column;

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        margin-bottom: 17px;
      }

      .desc {
        font-size: 18px;
        font-weight: 400;
        color: #7C7C7C;
        line-height: 30px;
        margin-bottom: 16px;
      }

      .course-info {
        flex: 1;
        height: 0;
        background: #F2F2F2;
        padding: 26px 33px;
        overflow: auto;

        .info {
          font-size: 18px;
          color: #313131;
          margin-bottom: 20px;

          span {
            color: #7C7C7C;
          }
        }
      }
    }
  }

  .button {
    text-align: center;
    margin-bottom: 62px;

    :deep(.el-button) {
      border-radius: 26px;
      width: 129px;
      height: 39px;
    }
  }
}
</style>